<template>
  <div>
    <div>
          <div class="page-title">
              <span>分配角色</span>
              <a id="back_a" @click="back()">返回上一页</a>
          </div>
            <template>
                <div class="role">
                    <el-transfer v-model="adminRoles" :data="allRoles" :titles="titles"></el-transfer>
                </div>
            </template>
            <el-button type="primary" class="btnCenter" @click="save()">保存</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name:'AdminRole',
        data() {
            return {
                adminId:0,
                allRoles: [],
                //右侧选中的值，左侧的值为data-右侧的值
                adminRoles: [1, 2],
                titles:['未选角色','已选角色']
            };
        },
        methods:{
            back(){
                this.$router.push({name:'AdminList'});
            },
            save(){
                let params = {
                    adminRoles:this.adminRoles,
                    adminId:this.adminId
                };
                this.$api.saveAdminRole(params).then(response=>{
                    let result = response.data;
                    if(result.code==0){
                        this.$message({  type: 'success',message:'保存成功'});
                    } else {
                        this.$message({  type: 'error',message:response.data.msg});
                    }
                });

            }
        },
        mounted(){
            let params =  this.$route.params;
            if(params&&params.adminId){
                this.adminId = params.adminId;
                this.$api.getAdminRole(params).then(response=>{
                    let result = response.data;
                    if(result.code==0){
                        this.allRoles =  result.data.allRoles;
                        this.adminRoles = result.data.adminRoles;
                    } else {
                        this.$message({  type: 'error',message:response.data.msg});
                    }
                });
            }
        }
    };
</script>

<style lang="less">
    .el-transfer-panel {
        width: 500px !important;
    }
    .btnCenter{
        margin-left: 43%;
        margin-top: 100px;
    }
</style>